<template>
  <div class="study-page">
    <Header />
    <div class="main-content">
      <div class="video-section">
        <h2>{{ currentLesson.title }}</h2>
        <video 
          :src="currentLesson.videoUrl" 
          controls 
          class="video-player"
        ></video>
      </div>
      <div class="course-outline">
        <h3>课程大纲</h3>
        <div class="chapters">
          <div 
            v-for="(chapter, index) in chapters" 
            :key="index" 
            class="chapter"
          >
            <div 
              class="chapter-header" 
              @click="toggleChapter(index)"
            >
              <span class="chapter-title">{{ chapter.title }}</span>
              <span class="toggle-icon">{{ chapter.isOpen ? '▼' : '▶' }}</span>
            </div>
            <div 
              v-if="chapter.isOpen" 
              class="lessons"
            >
              <div 
                v-for="lesson in chapter.lessons" 
                :key="lesson.id" 
                class="lesson"
                :class="{ active: currentLesson.id === lesson.id }"
                @click="switchLesson(lesson)"
              >
                <span class="lesson-title">{{ lesson.title }}</span>
                <span class="lesson-duration">{{ lesson.duration }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import Header from '../components/Header.vue'

const route = useRoute()
const currentLesson = ref({
  id: 1,
  title: 'Python环境搭建',
  videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
})

const chapters = ref([
  {
    title: '第一章：Python基础入门',
    isOpen: true,
    lessons: [
      { 
        id: 1, 
        title: 'Python环境搭建', 
        duration: '15:00', 
        completed: true,
        videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
      },
      { 
        id: 2, 
        title: 'Python基础语法', 
        duration: '20:00', 
        completed: false,
        videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
      },
      { 
        id: 3, 
        title: '变量和数据类型', 
        duration: '25:00', 
        completed: false,
        videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
      }
    ]
  },
  {
    title: '第二章：控制流程',
    isOpen: false,
    lessons: [
      { 
        id: 4, 
        title: '条件语句', 
        duration: '18:00', 
        completed: false,
        videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
      },
      { 
        id: 5, 
        title: '循环语句', 
        duration: '22:00', 
        completed: false,
        videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
      },
      { 
        id: 6, 
        title: '函数定义与调用', 
        duration: '30:00', 
        completed: false,
        videoUrl: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4'
      }
    ]
  }
])

const completedLessons = computed(() => {
  return chapters.value.reduce((total, chapter) => {
    return total + chapter.lessons.filter(lesson => lesson.completed).length
  }, 0)
})

const totalLessons = computed(() => {
  return chapters.value.reduce((total, chapter) => {
    return total + chapter.lessons.length
  }, 0)
})

const toggleChapter = (index) => {
  chapters.value[index].isOpen = !chapters.value[index].isOpen
}

const switchLesson = (lesson) => {
  currentLesson.value = {
    id: lesson.id,
    title: lesson.title,
    videoUrl: lesson.videoUrl
  }
}

onMounted(() => {
  const courseId = route.params.courseId
  console.log('Course ID:', courseId)
  // 加载默认课程
  if (chapters.value.length > 0 && chapters.value[0].lessons.length > 0) {
    switchLesson(chapters.value[0].lessons[0])
  }
})
</script>

<style scoped>
.study-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  display: flex;
  padding: 20px;
  margin-top: 60px;
  gap: 20px;
}

.video-section {
  flex: 2;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.video-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  margin-top: 15px;
}

.course-outline {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chapter {
  margin-bottom: 10px;
}

.chapter-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f8f8f8;
  cursor: pointer;
  border-radius: 4px;
}

.chapter-header:hover {
  background: #f0f0f0;
}

.lessons {
  padding: 10px 0 10px 20px;
}

.lesson {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
}

.lesson:hover {
  background: #f5f5f5;
}

.lesson.active {
  background: #e6f7ff;
  color: #1890ff;
}

.lesson-duration {
  color: #999;
  font-size: 0.9em;
}

h2, h3 {
  margin: 0 0 20px 0;
  color: #333;
}
</style> 